<template>
  <div
    class="box"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="header">
      <i class="iconfont icon-fanhui"></i>
      <p>注册</p>
    </div>
    <img src="../../assets/images/bg5.png" alt="" class="bg" />
    <div class="title">
      <img :src="appLogo" alt="" />
      <p>
        推荐人：
        <span>{{ nickName }}</span>
      </p>
    </div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      ref="formLabelAlign"
    >
      <el-form-item prop="name">
        <el-input
          v-model="formLabelAlign.name"
          placeholder="请输入注册手机号"
          clearable
        >
          <i
            slot="prefix"
            class="iconfont icon-yonghutouxiang"
            style="color: #e95b3b;"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="region">
        <el-input
          v-model="formLabelAlign.region"
          placeholder="请输入您的登录密码"
          show-password
          ><i
            slot="prefix"
            class="iconfont icon-mima"
            style="color: #e95b3b"
          ></i
        ></el-input>
      </el-form-item>
      <el-form-item class="input" prop="type" size="medium">
        <el-input
          v-model="formLabelAlign.type"
          placeholder="请输入短信验证码"
          class="input-code"
        >
          <i
            slot="prefix"
            class="iconfont icon-dunpai"
            style="color: #e95b3b"
          ></i>
        </el-input>
        <div class="code" v-if="code" @click="get">获取验证码</div>
        <div class="code" v-else @click="gain">
          重新获取(<span>{{ num }}</span
          >)s
        </div>
      </el-form-item>
      <div class="check">
        <div @click="flag = !flag">
          <img v-if="flag" src="../../assets/images/gou2.png" alt="" />
          <img v-else src="../../assets/images/round2.png" alt="" />
        </div>
        <span> 注册即代表您同意 《用户注册条例》</span>
      </div>
      <button class="resg" @click="sub('ruleForm')">立即注册</button>
      <button class="down" @click="go">已有账号？去下载APP</button>
    </el-form>
  </div>
</template>

<script>
import { toRegisterNew, registerYzm, selectDownloadHtml } from '../../local/api'
import qs from 'qs'

export default {
  data() {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      rules: {
        name: [{ required: true, validator: this.ValidPhone, trigger: 'blur' }],
        region: [{ required: true, validator: this.ValidPwd, trigger: 'blur' }],
        type: [{ required: true, validator: this.ValidCode, trigger: 'blur' }]
      },
      flag: false,
      code: '',
      num: 30,
      sign: '',
      iosUrl: '',
      AndroidUrl: '',
      url: '',
      key: '',
      parentId: '',
      oBrandId: '',
      appLogo: '',
      nickName: ''
    }
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('data')))
    this.key = JSON.parse(localStorage.getItem('data')).key
    this.parentId = JSON.parse(localStorage.getItem('data')).userId
    this.oBrandId = JSON.parse(localStorage.getItem('data')).oBrandId
    this.appLogo = JSON.parse(localStorage.getItem('data')).appLogo
    this.nickName = JSON.parse(localStorage.getItem('data')).nickName

    console.log(
      this.key,
      this.parentId,
      this.oBrandId,
      this.appLogo,
      this.nickName,
      '8987'
    )
  },
  methods: {
    // 注册
    async sub() {
      // 加密
      this.sign = this.$md5(
        'oBrandId=' +
          this.oBrandId +
          '&parentId=' +
          this.parentId +
          '&phone=' +
          this.formLabelAlign.name +
          '&pwd=' +
          this.formLabelAlign.region +
          '&verificationCode=' +
          this.formLabelAlign.type +
          '&key=' +
          this.key
      )
      if (this.flag) {
        console.log(this.sign)
        this.loading = true
        // 发送请求
        const data = await toRegisterNew(
          qs.stringify({
            phone: this.formLabelAlign.name, // this.formLabelAlign.name
            pwd: this.formLabelAlign.region, // this.formLabelAlign.region
            verificationCode: this.formLabelAlign.type, // this.formLabelAlign.type
            oBrandId: this.oBrandId,
            parentId: this.parentId,
            key: this.key,
            sign: this.sign
          })
        )
        this.$message(`${data.msg}`)
        console.log(data)
      } else {
        this.$message.error('请先勾选《用户注册条例》')
        console.log(111)
      }
    },
    // 去下载页面
    async go() {
      const data = await selectDownloadHtml(
        qs.stringify({ oBrandId: this.oBrandId })
      )
      this.url = data.data
      localStorage.setItem('link', JSON.stringify(this.url))
      this.$router.push({ path: '/download', query: { link: this.url } })
    },
    // 发送验证码
    async get() {
      this.code = !this.code
      const time = setInterval(() => {
        this.num--
        if (this.num === 0) {
          clearInterval(time)
        }
      }, 1000)
      const data = await registerYzm(
        qs.stringify({
          phone: this.formLabelAlign.name,
          oBrandId: this.oBrandId
        })
      )
      console.log(data)
    },
    // 重新获取验证码
    async gain() {
      if (this.num === 0) {
        this.num = 30
        const data = await registerYzm(
          qs.stringify({
            phone: this.formLabelAlign.name,
            oBrandId: this.oBrandId
          })
        )
        const time = setInterval(() => {
          this.num--
          if (this.num === 0) {
            clearInterval(time)
          }
        }, 1000)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 100%;
}
.bg {
  width: 100%;
  height: 100%;
  margin-top: 40px;
}
.header {
  position: absolute;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  i {
    position: absolute;
    left: 5px;
  }
}
.title {
  font-size: 33px;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  top: 18%;
  left: 50%;
  margin-left: -70px;
  text-align: center;
  img {
    width: 15rem;
  }
  p {
    margin: 10px;
  }
}
/deep/.el-form-item__error {
  color: #ffd24a;
}
.el-form {
  width: 80%;
  margin: auto;
  border-radius: 15px;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -40%;
  margin-top: 130px;
  /deep/.el-form-item__label {
    line-height: 0;
  }
  // input {
  //   border: none;
  //   background-color: #db2b13;
  //   outline: none;
  //   padding: 12px;
  //   border-radius: 4px;
  //   width: 93%;
  // }
  /deep/.el-input__inner {
    margin-top: 5px;
    background-color: #db2b13;
    border: none;
    color: #ff5c23;
  }
  /deep/.el-input__prefix,
  .el-input__suffix {
    top: 5px;
  }
  /deep/.el-input__suffix {
    line-height: 50px;
  }
  .input {
    position: relative;
    .input-code {
      width: 68%;
    }
    .code {
      border: none;
      outline: none;
      border-radius: 5px;
      padding: 0px 5px;
      color: #e2501f;
      background-color: #ffd24a;
      position: absolute;
      right: 0;
      top: 5px;
    }
  }
  .check {
    display: flex;
    color: #fff;
    img {
      width: 13px;
      margin-bottom: 15px;
    }
    /deep/.el-form-item__content {
      display: flex;
      justify-content: center;
    }
  }
  .resg,
  .down {
    border: none;
    outline: none;
    border-radius: 5px;
    padding: 12px;
    color: #e2501f;
    background-color: #ffd24a;
    width: 100%;
    margin-bottom: 15px;
    box-shadow: 0 4px 0#d23218;
  }
  .down {
    background-color: #fff;
  }
}
</style>
